<template>
  <view class="city-select-container">

    <!-- 定位城市 -->
    <view class="location-section">
      <view class="section-title">定位城市</view>
      <view class="location-content">
        <view class="location-btn">{{ currentCity }}</view>
        <text class="relocate-text" @click="relocate">重新定位</text>
      </view>
    </view>

    <!-- 热门城市 -->
    <view class="popular-section">
      <view class="section-title">热门城市</view>
      <view class="popular-grid">
        <view 
          class="popular-item" 
          v-for="city in popularCities" 
          :key="city"
          @click="selectCity(city)"
        >
          {{ city }}
        </view>
      </view>
    </view>

    <!-- 城市列表 -->
    <view class="city-list-section">
      <view class="tab-bar">
        <view class="tab-item active">国内</view>
      </view>
      
      <view class="city-list-container">
        <scroll-view 
          class="city-list" 
          scroll-y 
          :scroll-into-view="scrollIntoView"
          @scroll="onScroll"
        >
          <view 
            class="city-group" 
            v-for="group in cityGroups" 
            :key="group.letter"
            :id="'letter-' + group.letter"
          >
            <view class="group-title">{{ group.letter }}</view>
            <view 
              class="city-item" 
              v-for="city in group.cities" 
              :key="city"
              @click="selectCity(city)"
            >
              {{ city }}
            </view>
          </view>
        </scroll-view>
        
        <!-- 字母索引 -->
        <view class="letter-index">
          <view 
            class="letter-item" 
            v-for="letter in letters" 
            :key="letter"
            @click="scrollToLetter(letter)"
          >
            {{ letter }}
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'CitySelect',
  data() {
    return {
      currentCity: '焦作',
      popularCities: ['上海', '深圳', '广州', '成都', '三亚', '杭州', '西安', '南京', '厦门'],
      letters: ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'W', 'X', 'Y', 'Z'],
      cityGroups: [
        {
          letter: 'B',
          cities: ['北京市', '保定市']
        },
        {
          letter: 'C',
          cities: ['成都市', '常州市', '长沙市']
        },
        {
          letter: 'D',
          cities: ['大连市', '东莞市']
        },
        {
          letter: 'F',
          cities: ['佛山市', '福州市']
        },
        {
          letter: 'G',
          cities: ['广州市', '贵阳市']
        },
        {
          letter: 'H',
          cities: ['杭州市', '合肥市', '哈尔滨市']
        },
        {
          letter: 'J',
          cities: ['济南市', '嘉兴市']
        },
        {
          letter: 'K',
          cities: ['昆明市']
        },
        {
          letter: 'L',
          cities: ['兰州市', '廊坊市']
        },
        {
          letter: 'M',
          cities: ['绵阳市', '茂名市']
        },
        {
          letter: 'N',
          cities: ['南京市', '南昌市', '宁波市']
        },
        {
          letter: 'P',
          cities: ['莆田市']
        },
        {
          letter: 'Q',
          cities: ['青岛市', '泉州市']
        },
        {
          letter: 'R',
          cities: ['日照市']
        },
        {
          letter: 'S',
          cities: ['上海市', '深圳市', '苏州市', '三亚市', '沈阳市']
        },
        {
          letter: 'T',
          cities: ['天津市', '太原市']
        },
        {
          letter: 'W',
          cities: ['武汉市', '无锡市']
        },
        {
          letter: 'X',
          cities: ['西安市', '厦门市', '徐州市']
        },
        {
          letter: 'Y',
          cities: ['烟台市', '银川市']
        },
        {
          letter: 'Z',
          cities: ['郑州市', '珠海市']
        }
      ],
      scrollIntoView: ''
    }
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      })
    },
    relocate() {
      uni.showLoading({
        title: '定位中...'
      })
      
      // 模拟定位过程
      setTimeout(() => {
        uni.hideLoading()
        this.currentCity = '焦作'
        uni.showToast({
          title: '定位成功',
          icon: 'success'
        })
      }, 2000)
    },
    selectCity(cityName) {
      // 选择城市后的处理逻辑
      uni.showToast({
        title: `已选择${cityName}`,
        icon: 'success'
      })
      
      // 可以将选中的城市传递给上一个页面
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      if (prevPage) {
        prevPage.$vm.selectedCity = cityName
      }
      
      // 返回上一页
      setTimeout(() => {
        this.goBack()
      }, 1000)
    },
    scrollToLetter(letter) {
      this.scrollIntoView = 'letter-' + letter
    },
    onScroll(e) {
      // 滚动事件处理
      console.log('滚动位置:', e.detail.scrollTop)
    }
  }
}
</script>

<style scoped>
.city-select-container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
  height: 88rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #e5e5e5;
}

.nav-left, .nav-right {
  display: flex;
  align-items: center;
}

.nav-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.nav-right {
  gap: 20rpx;
}

.iconfont {
  font-size: 40rpx;
  color: #666;
}

/* 定位城市样式 */
.location-section {
  background-color: #fff;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.section-title {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 20rpx;
}

.location-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.location-btn {
  background-color: #f0f0f0;
  padding: 15rpx 30rpx;
  border-radius: 25rpx;
  font-size: 28rpx;
  color: #333;
}

.relocate-text {
  color: #007aff;
  font-size: 28rpx;
}

/* 热门城市样式 */
.popular-section {
  background-color: #fff;
  padding: 30rpx 20rpx;
  margin-bottom: 20rpx;
}

.popular-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20rpx;
}

.popular-item {
  background-color: #f0f0f0;
  padding: 20rpx;
  border-radius: 10rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
}

/* 城市列表样式 */
.city-list-section {
  background-color: #fff;
  flex: 1;
}

.tab-bar {
  display: flex;
  border-bottom: 1rpx solid #e5e5e5;
}

.tab-item {
  padding: 20rpx 40rpx;
  font-size: 28rpx;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #007aff;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60rpx;
  height: 4rpx;
  background-color: #007aff;
  border-radius: 2rpx;
}

.city-list-container {
  position: relative;
  height: calc(100vh - 400rpx);
}

.city-list {
  height: 100%;
  padding-right: 60rpx;
}

.city-group {
  margin-bottom: 20rpx;
}

.group-title {
  padding: 20rpx 20rpx 10rpx;
  font-size: 28rpx;
  color: #999;
  background-color: #f5f5f5;
}

.city-item {
  padding: 25rpx 20rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #e5e5e5;
  background-color: #fff;
}

.city-item:last-child {
  border-bottom: none;
}

/* 字母索引样式 */
.letter-index {
  position: absolute;
  right: 10rpx;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.1);
  border-radius: 20rpx;
  padding: 10rpx 5rpx;
}

.letter-item {
  font-size: 20rpx;
  color: #666;
  padding: 5rpx 8rpx;
  line-height: 1.2;
}

.letter-item:active {
  color: #007aff;
}
</style> 
